<html>
    <head>
    </head>
    <body>
        <button onclick="streamer.start()">Start stream</button>
        <button onclick="streamer.stop()">Stop stream</button>
        <button onclick="player.start()">Play stream</button>
        <button onclick="player.stop()">Stop playing</button>
        <br>
        <br>
        <a href="#" class="mute" onclick="voiceMute()">Mute</a>
        <br>
        <br>
        <input id="volume" type="range" min ="0.0" max="1.0" step ="0.01" oninput="setVol(this.value)" onchange="setVol(this.value)" style="-webkit-appearance: slider-vertical">
        <input type="text" id="volumeIndicator">
    </body>
    <script src="scripts/ws-audio-api.min.js"></script>
    <script>
        var player = new WSAudioAPI.Player();
        var streamer = new WSAudioAPI.Streamer();
        var mute = document.querySelector('.mute');
        var volume = document.querySelector('#volume');
        var volumeIndicator = document.querySelector('#volumeIndicator');
        volumeIndicator.value = player.getVolume();

        function setVol(val){
            player.setVolume(val);
            volumeIndicator.value = player.getVolume();
        }

        function voiceMute() {
          if(mute.id == "") {
            streamer.mute();
            mute.id = "activated";
            mute.innerHTML = "Unmute";
          } else {
            streamer.unMute();
            mute.id = "";
            mute.innerHTML = "Mute";
          }
        }
    </script>
</html>